<template>
	<view>
		<page-head headTitle="订单" rightWords="定制订单" :returnButton="true" @clickLeftReturn="clickLeftReturn" @onClickWords="onClickWords"></page-head>
		<view class="bg-white p-l-r3 orde-top fixed fixed-top9 orde-pb">
			<view class="flex height align-center fs-g">
				<view @click="changen(index)" class="flex-1 flex justify-content orde-r fs-g" 
				v-for="(item,index) in tabBar" :key="index" :class="tabIndex===index?'order-bj':''">
					<text class="order-text" >{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="orde-mt">
			<view class="m" v-for="(item,index) in list" v-show="tabIndex==index">
				<view class="bg-white border-r2 p-l-r3 p-t-b3 m-t-3" v-for="(v_item,v_index) in item" @tap="goDetails" :data-sn="v_item.sn">
					<view class="flex justify-between align-center">
						<image src="/static/logo.png" class="book-image border-r1 mr" mode="widthFix"></image>
						<view class="flex-1">
							<view class="flex align-start justify-between">
								<view class="flex">
									<text class="fs-32">{{v_item.seller_name}}</text>
								</view>
								<text class="color-blue">{{v_item.status_text}}</text>
							</view>
						</view>
					</view>	
					<view class="flex align-center justify-between p-t4 p-t2">
						<image class="image-size m-r1" mode="widthFix" :src="v_item.goods.image"></image>
						<text class="m-r1 details-line white-space fs-3 flex-1">{{v_item.goods.name}}</text>
						<view class="flex">
							<text class="fs-g">x{{v_item.qty}}</text>
						</view>
					</view>
					<view class="">
						<view class="flex justify-end">共<text>2</text>商品 合计：<text>￥{{v_item.amount}}</text></view>
						<view class="m-t-3 m-b1 flex justify-end">
							<button class="shop-usage fs-2 bg-color" v-show="v_item.can_pay == 1">去付款</button>
							<button class="shop-usage fs-2 bg-color" v-show="v_item.can_cancel == 1" @tap.stop="cancel" :data-sn="v_item.sn">取消订单</button>
							<button class="shop-usage fs-2 bg-color" v-show="v_item.can_use == 1">到店使用</button>
							<button class="shop-usage fs-2 bg-color" v-show="v_item.can_refund == 1">申请退款</button>
							<button class="shop-usage fs-2 bg-color" v-show="v_item.can_comment == 1">评价</button>
						</view>
					</view>
				</view>
				<view class="loading">{{loadingText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				tabIndex:0,
				tabBar:[
					{name:'全部'},
					{name:'待付款'},
					{name:'待使用'},
					{name:'待评价'}
				],
				list:[{},{},{},{}],
				showList:[[],[],[],[]],
				pages:[
					{page:1},
					{page:1},
					{page:1},
					{page:1}
				],
				last:[
					{isLast:0},
					{isLast:0},
					{isLast:0},
					{isLast:0}
				],
				onload:0,
				loadingText:'',
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if(this.onload !=1){ 
				this.getList(this.tabIndex, 1); //下一页
			}
		},
		methods: {
			//取消订单
			cancel(e){
				uni.showModal({  
				  title: '提示',  
				  content: '确定取消订单吗？',  
				  success: (res) => {  
					if (res.confirm) { 
						var orderSn = e.currentTarget.dataset.sn;
						this.$myRequest({
							method:'POST',
							url:'/api/order/cancel',
							data:{
								sn:orderSn,
							},
						}).then(res=>{
						    if(res.data.code == 1){
								window.location.reload();
							}
						});
					}  
				  }  
				})
			},
			changen(index){
				this.tabIndex = index;
				this.loadingText = '';
				if(this.pages[index].page == 1 && this.last[index].isLast === 0 && this.list[index].length == 0){
					this.getList(index);
				}
			},
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			getList(index=0, next=0){
				if(this.last[index].isLast == 1){
					return false;
				}
				var status;
				switch(index) {
				    case 0:
						status = -1;
				        break;
				    case 1:
				        status = 0;
				        break;
					case 2:
					    status = 5;
					    break;
					case 3:
					    status = 50;
					    break;
				    default:
				        status = -1;
				}
				var page = this.pages[index].page;
				if(next == 1){
					page+=1;
					if(this.onload == 1){
						return false;
					}
					this.onload = 1;
					this.loadingText = '加载中...';
					uni.showNavigationBarLoading();
				}
				this.$myRequest({
					method:'POST',
					url:'/api/user/orders',
					data:{
						status:status,
						page:page
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						var result_list = res.data.data.list;
						if(next == 1){
							//下一页
							if(result_list == ''){
								this.last[index].isLast = 1;
								uni.hideNavigationBarLoading();
								this.loadingText = '已加载全部';
							}else{
								this.list[index] = this.list[index].concat(result_list);
								this.loadingText = '加载更多';
								this.pages[index].page = page;
								uni.hideNavigationBarLoading();
							}
							this.onload = 0;
						}else{
							//加载默认
							if(result_list == ''){
								//切换菜单栏，无订单时候显示占位图处
							}
							this.showList[index] = result_list;
							this.list = '';
							this.list = this.showList;
						}
					}
				})
			},
			//订单详情
			goDetails(e){
				var orderSn = e.currentTarget.dataset.sn;
				uni.navigateTo({
					url: '../order-details/order-details?sn='+orderSn,
				});
			},
			onClickWords(){
				uni.navigateTo({
					url: '../custom-order/custom-order'
				})
			}
		}
	}
</script>

<style scoped>
.orde-mt{margin-top: 240rpx;}
.search-icon{font-size: 60rpx;color: #AAAAAA;}
.book-image{width: 80rpx; height: 80rpx;}
.shop-usage{margin-right: 0 !important;padding: 0 !important; line-height:1.8;width: 140rpx; height: 50rpx;}
.loading{text-align:center; line-height:80px;}
</style>
